<script setup lang="ts">
import { useStore } from 'vuex'
import { computed, onMounted, ref } from 'vue'
import { LoginUser } from '../utils/IpcData'
import { modifyUser, uploadAvatar } from '../api/user'
import { ElMessage } from 'element-plus'

const loader = ref(false)
const store = useStore()
const nickname = computed(() => store.getters.getUserNickname)
const avatar = computed(() => store.getters.getUserAvatar)

const modifyAvatar = ref('')
const modifyName = ref('')

onMounted(() => {
  loader.value = true
  setTimeout(() => {
    window.electron.ipcRenderer.send('initVuex')
  }, 200)
})

window.electron.ipcRenderer.on('initVuex', (_, args) => {
  loader.value = false
  const loginUser: LoginUser = args[0]
  store.commit('SET_USER_ID', loginUser.userId)
  store.commit('SET_NICKNAME', loginUser.nickname)
  store.commit('SET_AVATAR', loginUser.avatar)
  modifyAvatar.value = avatar.value
  modifyName.value = nickname.value
})

const handleWindowClose = () => {
  window.electron.ipcRenderer.send('close-user-profile')
}

const handleModifyAvatarClick = () => {
  document.getElementById('avatarInput')!.click()
  document.getElementById('avatarInput')!.addEventListener('change', (event) => {
    if (event.target && event.target instanceof HTMLInputElement) {
      const inputElement = event.target as HTMLInputElement
      if (inputElement.files && inputElement.files[0]) {
        const file = inputElement.files[0]
        if (file) {
          loader.value = true
          const formData = new FormData()
          formData.append('avatar', file)

          uploadAvatar(formData).then((res: any) => {
            if (res.code === 200) {
              ElMessage.success(res.msg)
              modifyAvatar.value = res.data
            }
          })
          loader.value = false
        }
      }
    }
  })
}

const handleModify = () => {
  loader.value = true
  modifyUser(store.getters.getUserId, modifyName.value, modifyAvatar.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success('修改成功')
      window.electron.ipcRenderer.send('update-user-profile')
    }
  })
  loader.value = false
}
</script>

<template>
  <div class="h-7 flex flex-row">
    <div style="-webkit-app-region: drag" class="float-left h-7 flex-1"></div>

    <svg
      class="h-7 w-7 text-gray-500 hover:bg-red-500 hover:cursor-pointer hover:text-white float-right"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      @click="handleWindowClose"
    >
      <path
        fill-rule="evenodd"
        d="M14.348 14.849a1 1 0 01-1.414 0L10 11.414l-2.93 2.93a1 1 0 11-1.415-1.415l2.928-2.929-2.929-2.93a1 1 0 111.415-1.414l2.93 2.929 2.93-2.929a1 1 0 011.414 1.414l-2.93 2.93 2.93 2.93a1 1 0 010 1.415z"
        clip-rule="evenodd"
      />
    </svg>
  </div>

  <div v-loading="loader" class="mt-10 flex flex-col justify-center items-center">
    <div class="relative">
      <img
        class="h-32 w-32 rounded-full border-2 border-gray-200"
        :src="modifyAvatar"
        alt="用户头像"
      />
      <input
        id="avatarInput"
        type="file"
        accept="image/png, image/jpeg, image/jpg"
        style="display: none"
      />
    </div>

    <el-button type="success" class="mt-4" @click="handleModifyAvatarClick">修改头像</el-button>

    <div class="mt-10 w-72 text-left">
      <label for="nickname" class="text-gray-500" style="font-size: 15px">用户昵称</label>
      <el-input
        id="nickname"
        v-model="modifyName"
        style="height: 43px; width: 300px; font-size: 15px"
        class="mt-2"
        name="nickname"
        placeholder="用户昵称至少2位以上，不得超过6位"
      />
    </div>

    <div class="mt-10">
      <el-button
        type="primary"
        style="width: 200px; height: 35px; font-size: 16px"
        @click="handleModify"
        >修&nbsp;改</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
